<!-- 分类页面 -->
<template>
	<view class="page" ref="page">
		<!-- 搜索 -->
		<!-- <view class="search-index"> -->
<!-- 			#ifndef H5
				<view class="icon" @click="onCode">
					<text class="iconfont icon-saoyisao"></text>
				</view> -->

<!-- 			<view class="icon" @click="onPayCode">
				<text class="iconfont icon-fukuanma"></text>
			</view> -->
			<!-- <view style="width: 100%;" class="search">
				<view class="iconfont icon-fadajing"></view>
				<input type="text" placeholder="输入搜索内容" />
			</view> -->
		<!-- </view> -->
		<!-- 分类数据 -->
		<view class="classify-data" :style="'height:'+height+'px'">
			<view class="classify-one">
				<scroll-view scroll-y class="classify-list">
<!-- 					<view class="list action">
						<text>推荐分类</text>
					</view> -->
					<span v-for="(item,index) in typeTable" :key="index">
						<view class="list" style="background-color: white;"  @click="()=>categoryLook(item.oneTypeId)" v-if="typeId == item.oneTypeId">
							<text style="color: #000000;margin-top: 10px;">{{item.oneType}}</text>
						</view>
						<view class="list" @click="()=>categoryLook(item.oneTypeId)" v-if="typeId != item.oneTypeId">
							<text style="color: #000000;margin-top: 10px;">{{item.oneType}}</text>
						</view>
					</span>
					
					
				</scroll-view>
			</view>
			<view class="cate-right">
						<view class="cate-content" v-for="(item,index) in categoryTable" :key="item.categoryId"  @click="()=>categoryGoods(item.categoryId)">
							<image :src="ip+item.img" mode=""></image>
							<view class="cate-text">{{item.typeName}}</view>
						</view>
					</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import {baseUrl} from '@/config/baseUrl.js'
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components:{
			TabBar,
		},
		data() {
			return {
				height: 0,
				ip:"http://43.142.173.112:9090/images/",
				typeTable:[],
				categoryTable:[],
				typeId:1
			};
		},
		onLoad() {
			uni.request({
				// 192.168.2.111 本机ip  localhost
				url:  baseUrl+"/index/getGoodsType",
				method: 'POST',
				// data: {},
				header:{ "Content-Type": "application/x-www-form-urlencoded"},
				success: (res) => {
					console.log(res);
					this.typeTable = res.data.typeOne
					this.categoryLook(this.typeTable[0].oneTypeId)
				}
			})
		},
		onReady() {
			setTimeout(()=>{
			  uni.hideTabBar()  
			},100)
			let info = uni.createSelectorQuery().select(".page");
　　　  info.boundingClientRect((data) => { //data - 各种参数
					console.log(data.height);
					this.height = data.height - 100;
				  // #ifdef APP-PLUS 
					this.height = data.height - 130;
					// #endif 
　　    }).exec()
		},
		mounted() {
		},
		methods:{
			categoryLook(id){
				this.typeId=id
				uni.request({
					// 192.168.2.111 本机ip  localhost
					url:  baseUrl+"/index/getCategoryLook",
					method: 'POST',
					data: {TypeId:id},
					header:{ "Content-Type": "application/x-www-form-urlencoded"},
					success: (res) => {
						console.log(res);
						this.categoryTable = res.data.category
					}
				})
			},
			categoryGoods(id){
				uni.navigateTo({
					url: '/pages/SearchGoodsList/SearchGoodsList?oneTypeId='+id,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import 'classify.scss';
		.cate-right {
			width: 80%;
			height: 100vh;
			overflow: auto;
			.cate-content {
				float: left;
				width: 28%;
				height: 185rpx;
				text-align: center;
				margin: 20rpx 0 0 15rpx;
				padding: 5rpx;
				background: #f1f1f1;
				border-radius: 20rpx;
				image {
					width: 100rpx;
					height: 100rpx;
				}
				.cate-text {
					font-size: 34rpx;
				}
			}
			}
</style>
